<template>
  <view class="bg-1 area-filter">
    <view class="flex-1 flex" style="overflow: hidden;">
      <view class="h left-area">
        <scroll-view scrollY="true" class="h">
          <view v-for="(item, index) in areaList" :key="index" class="p-h24 flex-c item area-item"
            :class="[{ selected: selected.area === item.label }]" @click="selectArea(item)">
            <text>{{ item.label }}</text>
          </view>
        </scroll-view>
      </view>
      <view class="h flex-1 right-area">
        <scroll-view scrollY="true" class="h">
          <view v-for="(item, index) in streetList" :key="index" class="p-h30 m-h20 flex-c item street-item"
            :class="[{ selected: selected.street === item.label }]" @click="selectStreet(item)">
            <text>{{ item.label }}</text>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="bottom flex-c">
      <text class="text-400-128">切换城市 成都</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { defineEmits, computed, reactive, ref } from 'vue'
const emit = defineEmits(['change'])
type AreaItem = {
  label: string;
  children?: AreaItem[];
}

const areaList = ref<AreaItem[]>([
  { label: '全成都', children: [{ label: '全成都' }] },
  { label: '高新区', children: [{ label: '全高新区' }] },
  { label: '青羊区', children: [{ label: '全青羊区' }, { label: '三里屯街道' }] },
  { label: '武侯区', children: [{ label: '全武侯区' }] },
  { label: '金牛区', children: [{ label: '全金牛区' }] },
  { label: '温江区', children: [{ label: '全温江区' }] },
])

const selected = reactive({
  area: '全成都',
  street: '',
})

const streetList = computed(() => {
  const cur = areaList.value.find((item) => item.label === selected.area)

  return cur?.children ?? []
})

const selectArea = (data: AreaItem) => {
  if (data.label === selected.area) return

  selected.area = data.label
  // if (streetList.value.length > 0) {
  //   selected.street = streetList.value[0].label
  // }
}

const selectStreet = (data: AreaItem) => {
  if (data.label === selected.street) {
    selected.street = ''
  } else {
    selected.street = data.label
  }


  emit('change', selected.street)
}
</script>

<style lang="scss" scoped>
.area-filter {
  height: 790rpx;
  display: flex;
  flex-direction: column;
}

.left-area {
  width: 236rpx;
  background-color: $bg-color-6;
}

.item {
  height: 98rpx;
  color: $text-color-1;
  font-size: 30rpx;

  &.selected {
    color: $text-color-5;
    font-weight: bold;
  }
}

.area-item {
  &.selected {
    background-color: $bg-color-1;
  }
}

.street-item {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: $border-color-2;
    transform-origin: bottom;
    transform: scaleY(0.5);
  }
}

.bottom {
  height: 120rpx;
}
</style>
